codeEditor = function() {
	var layout;
	var westLayout;
	var styleProps;

	return {

		updateStyleProps: function(element) {
			while (element && element.nodeType == Node.TEXT_NODE) {
				element = element.parentNode;
			}
			if (!element || element.nodeType != Node.ELEMENT_NODE) return;
			var data = [];
			for (var key in element) {
				if (styleProps.dataModel.isEditableValue(element[key])) {
					var vals = [key, element[key]];
					vals.key = key;
					data.push(vals);
				}
			}
			styleProps.dataModel.removeAll();
			styleProps.dataModel.addRows(data);

		},

		init : function() {

			var mySourceEditor = new YAHOO.ext.Resizable('mySourceEditor', {
				wrap:true,
				pinned:true,
				width:window.screen.availWidth * .80,
				height:80,
				minWidth:200,
				minHeight: 50,
				dynamic: true
			});
			westLayout = new YAHOO.ext.BorderLayout(document.getElementById('east'), {
				hideOnLayout: true,
				north: {
					split:true,
					initialSize: 150,
					collapsible: true,
					titlebar: false
				},
				west: {
					split:true,
					initialSize: 200,
					minSize: 175,
					maxSize: 400,
					titlebar: false,
					collapsible: true
				},
				east: {
					split:true,
					initialSize: 202,
					minSize: 175,
					maxSize: 400,
					titlebar: false,
					collapsible: true,
					tabPosition:'top'
				},
				south: {
					split:true,
					initialSize: 150,
					minSize: 100,
					maxSize: 200,
					titlebar: false,
					collapsible: true
				},
				center: {
					titlebar: false,
					autoScroll:false,
					tabPosition:'top'
				}
			});

			var classSelect = YAHOO.ext.DomHelper.append(document.body, {
				tag: 'select', cls: 'ygrid-editor', children: [
			{tag: 'option', value: 'myClassA', html: 'myClassA'},
			{tag: 'option', value: 'content', html: 'content'},
			{tag: 'option', value: 'myClassB', html: 'myClassB'}]
			});
			YAHOO.util.Dom.generateId(classSelect);
			var customEditors = {
				'className' : new YAHOO.ext.grid.SelectEditor(classSelect)
			};


			styleProps = new YAHOO.ext.grid.PropsGrid('style-props-panel', null ,customEditors);
			// bogus object as a data source
			styleProps.setSource({
				"(name)": "Properties Grid",
				"grouping": false,
				"autoFitColumns": true,
				"productionQuality": false,
				"created": new Date(Date.parse('10/15/2006')),
				"tested": false,
				"version": .01,
				"borderWidth": [1,2,3,4]
			});
			function afterEdit(grid, rowIndex, colIndex, e) {
				alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was changed to: '
						+ this.getValueAt(rowIndex, colIndex));
			}

			styleProps.addListener('afteredit', afterEdit, styleProps.dataModel, true);
			styleProps.render();
			var evt = new NodeChangedListener();
			evt.fire = function(element) {
				codeEditor.updateStyleProps(element);
			}
			addNodeChangedListener(evt)
			westLayout.beginUpdate();
			westLayout.add('north', new YAHOO.ext.GridPanel(styleProps, {title: 'Class', closable: true}));
			westLayout.add('south', new YAHOO.ext.ContentPanel('eastSouth', {title: 'South', closable: false}));
			westLayout.add('center', new YAHOO.ext.ContentPanel('eastCenter', {title: 'Close Me', closable: false}));
			westLayout.endUpdate();

			layout = new YAHOO.ext.BorderLayout(document.body, {
				hideOnLayout: true,
				north: {
					split:false,
					initialSize: 40,
					maxSize: 100,
					collapsible: true,
					titlebar: false
				},
				west: {
					split:true,
					initialSize: 200,
					minSize: 175,
					maxSize: 400,
					titlebar: false,
					collapsible: true
				},
				east: {
					split:true,
					initialSize: 202,
					minSize: 175,
					maxSize: 400,
					titlebar: false,
					collapsible: true,
					tabPosition:'top',
					autoscroll:true
				},
				south: {
					split:true,
					initialSize: 100,
					minSize: 100,
					titlebar: false,
					collapsible: true,
					autoScroll:true
				},
				center: {
					titlebar: false,
					autoScroll:true,
					tabPosition:'top'
				}
			});


			layout.beginUpdate();
			layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
			// layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
			layout.add('west', new YAHOO.ext.NestedLayoutPanel(westLayout, {cloasable:false}));
			//					layout.add('east', new YAHOO.ext.ContentPanel('east', {title: 'Auto Tabs', closable: false}));
			layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Close Me', closable: false}));

			layout.add('east', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
			layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'Close Me', closable: false}));

			layout.getRegion('center').showPanel('center');
			layout.endUpdate();
		}
	}

}();
YAHOO.ext.EventManager.onDocumentReady(codeEditor.init, codeEditor, true);

